<template>
  <div class style="height:800px">
    <div id="c_test" class="css_animation" style="display:none;"></div>

    <div id="allmap"></div>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body,
html,
#allmap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: "微软雅黑";
}

.css_animation {
  height: 60px;
  width: 60px;
  border-radius: 30px;
  background: rgba(250, 0, 0, 0.9);
  -webkit-transform: scale(0);
  transform: scale(0);
  animation: myfirst 4s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes myfirst {
  to {
    transform: scale(0.6);
    background: rgba(0, 0, 0, 0);
  }
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
<script>
import { MP } from "./util/map";
import ComplexCustomOverlay from "./util/index";
export default {
  name: "Map",
  data() {
    return {
      msg: ""
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    set() {
      // 百度地图API功能
      var map = new BMap.Map("allmap"); // 创建Map实例
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        })
      );
      map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      var m1 = this.addMarker(116.404, 39.915);
      map.addOverlay(m1);

      var m2 = this.addMarker(116.434, 39.915);
      map.addOverlay(m2);

      var m3 = this.addMarker(116.404, 39.955);
      map.addOverlay(m3);

      var m4 = this.addMarker(116.474, 39.911);
      map.addOverlay(m4);
    },
    getData() {
      this.$nextTick(function() {
        var _this = this;
        MP(_this.ak).then(BMap => {
          ComplexCustomOverlay.prototype = new BMap.Overlay();
          ComplexCustomOverlay.prototype.initialize = function(map) {
            this._map = map;
            var div = (this._div = document.createElement("div"));
            div.style.position = "absolute";
            var arrow = (this._arrow = document.createElement("div"));

            arrow.style.position = "absolute";
            arrow.style.overflow = "hidden";
            div.appendChild(arrow);
            arrow.className = "css_animation";

            if (this._marker) {
              map.addOverlay(this._marker);
            }

            map.getPanes().labelPane.appendChild(div);

            return div;
          };
          ComplexCustomOverlay.prototype.draw = function() {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - 30 + "px";
            this._div.style.top = pixel.y - 30 + "px";
          };

          ComplexCustomOverlay.prototype.setPosition = function(point) {
            this._point = point;
            this.draw();
            if (this._marker) this._marker.setPosition(this._point);
          };

          ComplexCustomOverlay.prototype.getPosition = function() {
            return this._point;
          };
          this.set();
        });
      });
    },
    // 添加标记
    addMarker(_lon, _lat) {
      var point = new BMap.Point(_lon, _lat);
      var size = new BMap.Size(48, 48);
      var marker = new BMap.Marker(point, {
        icon: new BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
          scale: 6,
          rotation: 0,
          fillColor: "#f8081d",
          fillOpacity: 1,
          strokeColor: "#ff0016",
          strokeOpacity: 0.1,
          strokeWeight: 15
        })
      });
      var mapProto = new ComplexCustomOverlay(point, marker); // 创建标
      return mapProto;
    }
  }
};
</script>


